import * as echarts from '../../../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
    });

    canvas.setChart(chart);

    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            show: false
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [{
            smooth: true,
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            smooth: 0.5,
            itemStyle: {
                normal: {
                    color: "#00FFFF",
                    lineStyle: {
                        color: "#00FFFF",
                    },
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00FFFF' //下层渐变
                    }, {
                        offset: 0.8,
                        color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            }
        }]
    }

    chart.setOption(option);

    return chart;
}


// pages/index/basics/home/home.js
const app = getApp();

Component({
    options: {
        addGlobalClass: true,
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },


    /**
     * 组件的初始数据
     */
    data: {
        // 环形进度条参数
        circleDiam: 80, // 圆环直径
        cententDiam: 60, // 中心圆直径
        bgColor: '#e9e9e9',
        curColor: 'linear-gradient(#7affaf, #7a88ff)',
        value: 70,

        ec: {
            onInit: initChart
        },
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        cardCur: 0,
        swiperList: [],
        elements: [{
                title: '心率',
                name: '55',
                color: 'blue light',
                icon: 'newsfill'
            },
            {
                title: '体温',
                name: '--',
                color: 'cyan light',
                icon: 'colorlens'
            },
            {
                title: '血糖',
                name: '5.68',
                color: 'purple light',
                icon: 'font'
            },
            {
                title: '血压 ',
                name: '222',
                color: 'mauve light',
                icon: 'icon'
            },
            {
                title: '血氧',
                name: '222',
                color: 'pink light',
                icon: 'btn'
            },
            {
                title: '尿酸',
                name: '111',
                color: 'brown light',
                icon: 'tagfill'
            },
            {
                title: '血脂',
                name: '333',
                color: 'red light',
                icon: 'myfill'
            },
            {
                title: '身体成分',
                name: '44',
                color: 'orange light',
                icon: 'icloading'
            },
            // {
            //     title: '阴影',
            //     name: 'shadow',
            //     color: 'olive light',
            //     icon: 'copy'
            // },
            // {
            //     title: '加载',
            //     name: 'loading',
            //     color: 'green light',
            //     icon: 'loading2'
            // },
            // {
            //     title: '标题',
            //     name: 'title',
            //     color: 'blue light',
            //     icon: 'brand'
            // },
            // {
            //     title: '边框',
            //     name: 'border',
            //     color: 'pink light',
            //     icon: 'creative'
            // },
            // {
            //     title: '开关',
            //     name: 'switch',
            //     color: 'mauve light',
            //     icon: 'command'
            // },
            // {
            //     title: '复选框',
            //     name: 'checkbox',
            //     color: 'red light',
            //     icon: 'squarecheck'
            // },
        ],
    },


    /**
     * 组件的方法列表
     */
    methods: {
        cardSwiper(e) {
            this.setData({
                cardCur: e.detail.current
            })
        },
        jumpTo(e) {
            return wx.navigateTo({
                url: e.currentTarget.dataset.page
            })
        }
    },
})